<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>访问json数据（基于jquery实现）</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.js"></script>
</head>
<body>
  <script>
    const body = $("body");
    $.getJSON("data/prop.json", function (data) {
      body.html("遍历由键值对构成的对象<br>");
      // .each()方法用于遍历由键值对构成的对象包含的键和值
      $.each(data, function (key, value) {
        if (typeof value === "object") {
          // Object.keys()用于获取由键值对构成的对象的所有键，返回值为数组对象
          // forEach()方法由数组对象调用，用于遍历数组对象包含的所有元素
          Object.keys(value).forEach(function (k) {
            body.append(k + "：" + value[k] + "，");
          });
          body.append("<br>");
        } else {
          body.append(key + "：" + value + "<br>");
        }
      })
    });
    $.getJSON("data/array.json", function (values) {
      body.html(body.html() + "遍历数组<br>");
      for (let i = 0; i < values.length; i++) {
        let value = values[i];
        if (typeof value === "object") {
          // 遍历键值对集合中的键或数组中的索引
          for (const k in value) {
            if (value.hasOwnProperty(k)) {
              body.append(k + "：" + value[k] + "，");
            }
          }
        } else {
          body.append(value + "<br>");
        }
      }
    })
  </script>
</body>
</html>